.container {
  .bg-color {
    width: 100%;
    height: 227rpx;
    background: linear-gradient(to bottom, RGBA(234, 246, 255, 1), RGBA(255, 255, 255, 1));
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    position: absolute;
    top: 0;
    left: 0;
  }

  // 支付凭证
  .scroll-h {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    overflow: hidden;
    .content-wrapper {
      padding: 0 24rpx;
      padding-top: 24rpx;
      .good-wrapper {
        box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(38, 39, 40, 0.06);
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        background: #fefeff;
        padding: 0 24rpx;
        margin-bottom: 24rpx;
        padding-bottom: 24rpx;
        .order-title {
          height: 84rpx;
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 26rpx;
          color: #262728;
        }
        .order-good {
          display: flex;
          margin-bottom: 24rpx;
          &:last-child {
            margin-bottom: 0;
          }
          .img {
            width: 258rpx;
            height: 172rpx;
            border-radius: 24rpx 24rpx 24rpx 24rpx;
            overflow: hidden;
            position: relative;
            margin-right: 14rpx;
            image {
              width: 100%;
              height: 100%;
            }
            .tag {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 120rpx;
              height: 35rpx;
              background: linear-gradient(180deg, #4badfd 0%, #2b61eb 100%);
              border-radius: 0rpx 24rpx 0rpx 24rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 400;
              font-size: 18rpx;
              color: #ffffff;
            }
          }
          .order-desc {
            flex: 1;
            height: 172rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name-w {
              display: flex;
              align-items: baseline;
              .name {
                font-weight: 500;
                font-size: 28rpx;
                color: #262728;
                flex: 1;
                line-height: 33rpx;
                margin-right: 28rpx;
              }
              .num {
                height: 40rpx;
                background: #f5f5f5;
                border-radius: 4rpx 4rpx 4rpx 4rpx;
                padding: 0 6rpx;
                line-height: 40rpx;
                text-align: center;
                font-weight: 400;
                font-size: 22rpx;
                color: #262728;
              }
            }
            .attr {
              font-weight: 400;
              font-size: 24rpx;
              color: #606366;
            }
            .price {
              font-weight: 600;
              font-size: 40rpx;
              color: #ff6a00;
              text {
                font-weight: 500;
                font-size: 22rpx;
                color: #ff6a00;
              }
            }
          }
        }
      }
      // 物品信息
      .peijian-lists {
        .peijian {
          padding-top: 0;
          box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
          border-radius: 24rpx;
          margin-bottom: 24rpx;
          padding: 0 24rpx;
          padding-bottom: 28rpx;
          &:last-child {
            margin-bottom: 0;
          }
          .title {
            height: 62rpx;
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
          }
          .good-jian {
            display: flex;
            align-items: center;
            & > image {
              width: 209rpx;
              height: 172rpx;
              border-radius: 12rpx 12rpx 12rpx 12rpx;
              margin-right: 16rpx;
            }
            .right-items {
              flex: 1;
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              .item-good {
                margin-right: 38rpx;
                margin-bottom: 26rpx;
                &:last-child {
                  margin-bottom: 0;
                }
                .ti {
                  font-weight: 300;
                  font-size: 24rpx;
                  color: #606366;
                  margin-bottom: 8rpx;
                  line-height: 28rpx;
                }
                .jian {
                  font-weight: 500;
                  font-size: 26rpx;
                  color: #262728;
                  line-height: 30rpx;
                }
              }
            }
          }
        }
      }
      .yunshu {
        height: 90rpx;
        background: #ffffff;
        box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(38, 39, 40, 0.06);
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        padding: 0 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24rpx;
        .ti {
          font-weight: 400;
          font-size: 28rpx;
          color: #262728;
        }
        .price {
          font-weight: 600;
          font-size: 40rpx;
          color: #ff6a00;
          text {
            font-weight: 500;
            font-size: 22rpx;
            color: #ff6a00;
          }
        }
      }

      // 上传支付凭证
      .up-payzhen {
        padding: 0 24rpx;
        box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(38, 39, 40, 0.06);
        border-radius: 12rpx;
        margin-bottom: 24rpx;
        padding-top: 24rpx;
        .top-pinzheng {
          display: flex;
          justify-content: space-between;
          .left-pinzhen {
            .top-pay {
              margin-bottom: 46rpx;
              .name {
                font-weight: 500;
                font-size: 26rpx;
                color: #262728;
                margin-bottom: 8rpx;
                line-height: 30rpx;
              }
              .desc {
                font-weight: 400;
                font-size: 22rpx;
                color: #606366;
              }
            }
            .btn {
              width: 296rpx;
              height: 83rpx;
              background: #007aff;
              border-radius: 12rpx 12rpx 12rpx 12rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 400;
              font-size: 24rpx;
              color: #ffffff;
            }
          }
          .add {
            width: 339rpx;
            height: 210rpx;
            background: #f5f5f5;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            image {
              width: 100rpx;
              height: 100rpx;
            }
          }
        }
        .tips {
          font-weight: 300;
          font-size: 20rpx;
          color: #606366;
          padding-top: 16rpx;
          padding-bottom: 24rpx;
        }
      }

      // 按钮组
      .btn-wrapper {
        padding-bottom: env(safe-area-inset-bottom);
        .btn {
          width: 100%;
          height: 100rpx;
          background: #f5f5f5;
          border-radius: 18rpx 18rpx 18rpx 18rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 400;
          font-size: 28rpx;
          color: #606366;
          &:first-child {
            margin-bottom: 48rpx;
          }
          &.active {
            color: #fff;
            background: linear-gradient(180deg, #4badfd 0%, #2b61eb 100%);
          }
        }
        .tips {
          padding: 16rpx 0;
          font-weight: 300;
          font-size: 20rpx;
          color: #606366;
          text-align: center;
        }
      }
    }
  }
}
